<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nubia Z70 - 超越一英寸的影像旗舰</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <!-- 粒子背景 -->
  <div id="particles-js"></div>

  <!-- 导航指示器 -->
  <nav class="nav-dots">
    <span class="dot active" data-section="0"></span>
    <span class="dot" data-section="1"></span>
    <span class="dot" data-section="2"></span>
    <span class="dot" data-section="3"></span>
    <span class="dot" data-section="4"></span>
  </nav>

  <!-- 主容器 -->
  <main class="container">

    <!-- Section 1: 旗舰影像系统 -->
    <section class="section camera-section" id="section-0">
      <div class="content">
        <h1 class="main-title gradient-text">旗舰影像系统</h1>

        <!-- 35mm人文主摄 -->
        <div class="camera-main">
          <div class="feature-card">
            <h2 class="sub-title">35mm 人文主摄</h2>
            <div class="highlight-text">
              <span class="big-number">990</span>
              <span class="sensor-text">豪威定制光影大师传感器</span>
            </div>
            <p class="description">"超越一英寸"画质 • 35mm黄金焦段</p>
            <div class="camera-preview">
              <div class="lens-3d">
                <div class="lens-ring"></div>
                <div class="lens-glass"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 多焦段镜头组 -->
        <div class="lens-gallery">
          <h3>多焦段影像系统</h3>
          <div class="lens-grid">
            <div class="lens-item" data-lens="ultra-wide">
              <div class="lens-icon">13mm</div>
              <span>超广角</span>
            </div>
            <div class="lens-item" data-lens="main">
              <div class="lens-icon">35mm</div>
              <span>主摄</span>
            </div>
            <div class="lens-item" data-lens="portrait">
              <div class="lens-icon">85mm</div>
              <span>人像</span>
            </div>
            <div class="lens-item" data-lens="telephoto">
              <div class="lens-icon">150mm</div>
              <span>潜望长焦</span>
            </div>
          </div>
        </div>

        <!-- 相机界面展示 -->
        <div class="camera-ui-showcase">
          <div class="ui-card">
            <div class="ui-screen">
              <div class="mode-indicator">专业模式</div>
              <div class="camera-controls">
                <span>ISO</span>
                <span>1/2000s</span>
                <span>f/1.8</span>
                <span>35mm</span>
              </div>
            </div>
          </div>
          <div class="ui-card">
            <div class="ui-screen astro-mode">
              <div class="mode-indicator">星空摄影</div>
              <div class="stars"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Section 2: 性能配置 -->
    <section class="section performance-section" id="section-1">
      <div class="content">
        <h1 class="main-title gradient-text">硬核性能</h1>

        <div class="specs-grid">
          <!-- 处理器与散热 -->
          <div class="spec-card">
            <div class="spec-icon cpu-icon">
              <div class="cpu-core"></div>
            </div>
            <h3>骁龙 8 Elite</h3>
            <p>3nm制程 • 旗舰性能</p>
            <div class="cooling-system">
              <span class="ice-text">冰封散热系统 4.0</span>
              <div class="heat-flow"></div>
            </div>
          </div>

          <!-- 屏幕参数 -->
          <div class="spec-card">
            <div class="spec-icon screen-icon">
              <div class="screen-shine"></div>
            </div>
            <h3>2K 144Hz 护眼屏</h3>
            <div class="screen-stats">
              <div class="stat">
                <span class="value">2880×1800</span>
                <span class="label">超清分辨率</span>
              </div>
              <div class="stat">
                <span class="value">144Hz</span>
                <span class="label">刷新率</span>
              </div>
              <div class="stat">
                <span class="value">1920Hz</span>
                <span class="label">PWM调光</span>
              </div>
            </div>
          </div>

          <!-- 续航能力 -->
          <div class="spec-card">
            <div class="spec-icon battery-icon">
              <div class="battery-level"></div>
            </div>
            <h3>续航组合</h3>
            <div class="battery-info">
              <div class="battery-capacity">
                <span class="big-text">6150</span>mAh
              </div>
              <div class="charging-speed">
                <span class="lightning">⚡</span>
                <span>100W 有线快充</span>
              </div>
              <p class="charge-time">17分钟充至80%</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Section 3: 设计师访谈 -->
    <section class="section interview-section" id="section-2">
      <div class="content">
        <h1 class="main-title gradient-text">设计理念</h1>

        <div class="interview-layout">
          <div class="quote-block">
            <blockquote>
              <span class="quote-mark">"</span>
              影像为故事存在
              <span class="quote-mark">"</span>
            </blockquote>
            <cite>— 倪飞</cite>
          </div>

          <div class="design-features">
            <div class="feature-row">
              <div class="design-card">
                <h3>摄影师版专属工艺</h3>
                <ul>
                  <li>星云纹理玻璃后盖</li>
                  <li>阳极氧化铝合金中框</li>
                  <li>仿皮革手感涂层</li>
                </ul>
              </div>
              <div class="design-card">
                <h3>专业交互体验</h3>
                <ul>
                  <li>独立相机按键</li>
                  <li>滑动变焦环设计</li>
                  <li>Nubia UI 摄影优化</li>
                </ul>
              </div>
            </div>
          </div>

          <div class="phone-3d-preview">
            <div class="phone-model">
              <div class="phone-frame"></div>
              <div class="camera-bump"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Section 4: 用户评价 -->
    <section class="section reviews-section" id="section-3">
      <div class="content">
        <h1 class="main-title gradient-text">真实口碑</h1>

        <!-- 媒体评测 -->
        <div class="media-reviews">
          <div class="review-card">
            <div class="media-logo">IT之家</div>
            <p class="review-text">"超越一英寸的影像表现，夜景拍摄能力尤为出色"</p>
            <div class="rating">★★★★★</div>
          </div>
          <div class="review-card">
            <div class="media-logo">中关村在线</div>
            <p class="review-text">"35mm人文视角独树一帜，色彩还原准确自然"</p>
            <div class="rating">★★★★★</div>
          </div>
        </div>

        <!-- 用户实拍墙 -->
        <div class="ugc-wall">
          <h3>用户实拍作品</h3>
          <div class="photo-marquee">
            <div class="marquee-content">
              <!-- 这里通过JS动态生成图片 -->
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Section 5: 购买信息 -->
    <section class="section purchase-section" id="section-4">
      <div class="content">
        <h1 class="main-title gradient-text">立即入手</h1>

        <!-- 价格体系 -->
        <div class="price-cards">
          <div class="price-card">
            <h3>标准版</h3>
            <div class="storage">12+256GB</div>
            <div class="price">
              <span class="currency">¥</span>
              <span class="amount">4099</span>
              <span class="original">¥4599</span>
            </div>
            <button class="buy-btn">立即购买</button>
          </div>
          <div class="price-card featured">
            <div class="badge">热销</div>
            <h3>高配版</h3>
            <div class="storage">16+512GB</div>
            <div class="price">
              <span class="currency">¥</span>
              <span class="amount">4599</span>
              <span class="original">¥5099</span>
            </div>
            <button class="buy-btn primary">立即购买</button>
          </div>
          <div class="price-card">
            <h3>摄影师版</h3>
            <div class="storage">24+1TB</div>
            <div class="price">
              <span class="currency">¥</span>
              <span class="amount">5999</span>
              <span class="original">¥6499</span>
            </div>
            <button class="buy-btn">立即购买</button>
          </div>
        </div>

        <!-- 预售福利 -->
        <div class="benefits">
          <h3>限时福利</h3>
          <div class="benefit-list">
            <div class="benefit-item">
              <span class="icon">🎁</span>
              <span>限量赤霞云摄影包</span>
            </div>
            <div class="benefit-item">
              <span class="icon">♻️</span>
              <span>以旧换新至高补贴1000元</span>
            </div>
            <div class="benefit-item">
              <span class="icon">🛡️</span>
              <span>2年官方延保服务</span>
            </div>
          </div>
        </div>

        <!-- 技术规格表 -->
        <div class="spec-table-wrapper">
          <button class="spec-toggle" id="specToggle">
            查看完整技术规格
            <span class="arrow">▼</span>
          </button>
          <div class="spec-table" id="specTable">
            <table>
              <tr>
                <td>处理器</td>
                <td>高通骁龙 8 Elite</td>
              </tr>
              <tr>
                <td>屏幕</td>
                <td>6.85英寸 2K OLED 144Hz</td>
              </tr>
              <tr>
                <td>主摄像头</td>
                <td>50MP OV990 1/1.4英寸</td>
              </tr>
              <tr>
                <td>电池</td>
                <td>6150mAh + 100W快充</td>
              </tr>
              <tr>
                <td>操作系统</td>
                <td>Nubia UI 14 (Android 15)</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 引入依赖 -->
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
  <script src="./js/main.js"></script>
</body>

</html>